<div id="content" 
    v-bind:class="{'content':configs.bgAllBool}"
    v-bind:style="{
      width:configs.bgAllBool ? '100%' : 'calc(100% - 434px)',
      height:configs.bgAllBool ? configs.window_h +'px' : 'auto',
      left:configs.bgAllBool && 0
    }">
    <div id="canvas"
      ref="canvas" 
      v-bind:style="{
        'transform':!configs.bgAllBool ?
        'scale('+configs.scale+')':
        'scale(0.64) ',
        'background':configs.backgroundUrl && 'url(' + configs.backgroundUrl + ')',
        'background-repeat':configs.backgroundUrl && ' no-repeat !important',
        'background-size':configs.backgroundUrl && ' contain !important'
        }"
        v-bind:class="{
        other:configs.bg === 'grey',
        grid:configs.bg === 'grid',
        floor:configs.bg === 'floor'
        }" >
      <!--遍历组件数组:图片-img,横线-lien_row,竖线-line_colu,柱子-pillar -->
      <div class="comp-item"
        v-for="(item, index) in edrawComps" :key="index"
        @click="selectItem($event, index)"
        @dragstart="item.style.isFixed === 'false' && dragComp($event, item, 'start', index)"
        @drag="item.style.isFixed === 'false' &&dragComp($event, item, 'drag', index)"
        @dragend=" item.style.isFixed === 'false' &&dragComp($event, item,'end', index)"
        v-bind:style="{
          width:item.style.width +'px',
          height:item.style.height +'px',
          top:(item.style.top - rect.y) +'px',
          left:(item.style.left - rect.x) +'px',
          position:item.style.position,
          borderWidth:item.style.borderWidth + 'px',
          transform: 'rotate('+ item.style.rotate +'deg)',
          'z-index':item.type === 'room' && '-1'
        }"
        v-bind:class="{
          active:item.isActive,
          roomActive:item.type === 'room'}"
          v-bind:draggable="item.isActive">

        <!-- 1.img -->
        <comp-img
          v-if="item.type === 'img'" 
          v-bind:item="item">
        </comp-img>
      
        <!-- 2.line_colu  -->
        <comp-line-colu
          v-if="item.type === 'line_colu'"
          v-bind:item="item">
        </comp-line-colu>

        <!-- 3.line_row  -->
        <comp-line-row
          v-if="item.type === 'line_row'"
          v-bind:item="item">
        </comp-line-row>

        <!-- 4.柱子 -->
        <comp-pillar 
          v-if="item.type === 'pillar'"
          v-bind:item="item">
        </comp-pillar>

        <!-- 5.盒子 -->
        <comp-room 
          v-if="item.type === 'room'"
          v-bind:item="item">
        </comp-room>
        
        <!-- 6.设备 -->
        <comp-device 
          v-if="item.type === 'device'"
          v-bind:item="item">
        </comp-device>

        <!-- 7.文本 -->
        <comp-text 
          v-if="item.type === 'text'" 
          v-bind:item="item"
          v-on:changeTextVal="changeTextVal">
        </comp-text>

        <!-- 8.冷通道 -->
        <comp-aisle 
          v-if="item.type==='aisle'"
          v-bind:item = "item">
        </comp-aisle>
        
        <!-- 辅助 -->	
        <comp-auxiliary
          v-if="item.isActive"
          v-bind:item="item"
          v-bind:configs="configs"
          v-bind:index="index"
          v-on:resizeByDragComp="resizeByDragComp"
          v-on:trans="trans"></comp-auxiliary>
      </div>
  </div>
  <div class="slide" v-if="!configs.bgAllBool">
    <img @click="zoom('zoom')" class="ctrl zoom" src="@/assets/icon/contr/zoom.svg" alt="增加" title="增加">
    <input 
      type="range" 
      v-bind:title="configs.scale"
      v-bind:class="{'disScale':configs.scale ==1}"
      class="slider" 
      v-model="configs.scale" 
      id="vol" 
      step="0.1" 
      name="vol" 
      min="0.7" 
      max="1.5">
    <img @click="zoom('zoomout')" class="ctrl zoomOut" src="@/assets/icon/contr/zoomOut.svg" alt="减少" title="减少">
  </div>
  <div class="screen" v-if="configs.bgAllBool">
    <img @click="screen" src="@/assets/icon/screen_cancel.svg" alt="右对齐" title="右对齐">
  </div>

 </div>